<template>
	<view class="tab df-ac">
		<view class="tab-item df-cc " v-for="item in datas" :key="item.id" @click="tabClick(item)" :class="{active:item.id==cur}">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			datas:{
				type:Array,
				default:()=> {
					return []
				}
			},
			selected:{
				type:[String , Number],
				defaut:'1'
			}
		},
		data() {
			return {
				cur:1
			};
		},
		created() {
			if(this.selected) {
				this.cur = this.selected
				
			}
		},
		methods:{
			tabClick(data) {
				this.cur = data.id
				this.$emit('tabClick',data)
			}
		}
	}
</script>

<style lang="scss">
.tab {
	overflow-y: auto;
	padding-top: 20rpx;
	box-shadow: 0px 6rpx 8rpx 0px rgba(114,124,142,0.15); 
	.tab-item {
		flex:1;
		flex-shrink: 0;
		min-width: 100rpx;
		padding: 20rpx;
		color: #282A32;
		font-size: 24rpx;
		&.active {
			color: #FF0000;
			//font-weight: bold;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 65rpx;
				height: 7rpx;
				border-radius: 4rpx;
				background-color: #FF0000;
			}
		}
	}
}
</style>
